﻿//Wheels.TripPlannerLegs = new Ext.form.ItineraryLegList({ listeners: { single: true} });

var myToolbar = new Ext.Panel({   
    //dock: 'top',    
    //html: '<p>Test Test</p>'    
    tpl : new Ext.Template(
        [
        '<div style="display:inline" width="100%" height="20px">{FromStop}</div>'
//            '<table width="100%" class="trip-list-item">',
//                '<tr>',
//                    '<td>From</td>',
//                    '<td>{FromStop}</td>',
//                    '<td>Date</td>',
//                    '<td>{StartDate}</td>',
//                '</tr>',
//                '<tr>',
//                    '<td>To</td>',
//                    '<td>{ToStop}</td>',
//                    '<td>Time</td>',
//                    '<td>{StartTime}</td>',
//                '</tr>',
//                '<tr>',
//                    '<td>From</td>',
//                    '<td>{FromStop}</td>',
//                    '<td>Date</td>',
//                    '<td>{StartDate}</td>',
//                '</tr>',
//                '<tr>',
//                    '<td>To</td>',
//                    '<td>{ToStop}</td>',
//                    '<td>Time</td>',
//                    '<td>{StartTime}</td>',
//                '</tr>',
//            '</table>',
                    
        ])
});

Wheels.TripPlannerLegsPanel = new Ext.extend(Ext.Panel, {
    scroll: 'vertical',
    //dockedItems: [myToolbar],
    items: [   
    myToolbar,
    list = new Ext.form.ItineraryLegList({ listeners: { single: true} })    
    ]
});

Wheels.TripPlannerLegs = new Wheels.TripPlannerLegsPanel();

function showLegs(itineraryId) {
    //var list = Wheels.TripPlannerLegs;

    myToolbar.update({ FromStop: 'rrrr' }, null, null);


    this.isLoaded = false;
    Ext.getBody().unmask();
    Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');

    $.getJSON("http://transit.cloudapp.net/DevTransitODataService.svc/Itineraries('" + itineraryId +
    "')?&$format=json&$callback=?&$expand=Legs", function (result) {
        if (result != null) {
            var lastLeg = null;

            var legsCount = result.d.Legs.results.length;
            if (legsCount) {
                this.StartTime = getTimeFromJSONString(getDate(result.d.Legs.results[0].StartTime));
                this.StartDate = getDateFromJSONString(getDate(result.d.Legs.results[0].StartTime));
                this.FromStop = result.d.Legs.results[0].StopName;
                this.ToStop = result.d.Legs.results[legsCount - 1].StopName;
            }

            $.each(result.d.Legs.results, function () {

                if (lastLeg) {
                    lastLeg.ToStopName = this.StopName;
                }
                lastLeg = this;

                var endTime = new Date();
                endTime.setTime(getDate(this.StartTime).getTime() + this.Duration * 1000);
                this.StartTime = getDateFromJSONString(getDate(this.StartTime));
                this.EndTime = getDateFromJSONString(endTime);
                // Check if last stop
                if (parseInt(this.Duration) == 0) {
                    this.Duration = '-';
                    this.EndTime = '-';
                    this.ToStopName = '-';
                } else {
                    this.Duration = getDurationBySeconds(this.Duration);
                }

            });

            var legsCount = result.d.Legs.results.length;

            var store = new Ext.data.Store({
                model: 'ItineraryLeg',
                data: result.d.Legs.results
            });

            list.setStore(store);
            list.refresh();

            Ext.getBody().unmask();
            this.isLoaded = true;
        }
    });
};

